<template>
	<view class="content">
		<zx-cart v-if="comType=='gwc'" ref="zxCart"></zx-cart>
		<zx-user v-else-if="comType=='wd'" ref="zxUser"></zx-user>
		<zx-goods-all v-else-if="comType=='splb'" ref="zxGoodsAll"></zx-goods-all>
		<view class="container">
			<zx-index v-if="comType=='index'&&0==pageIndex" :compontentId="-1" ref="zxIndex"></zx-index>
			<zx-index v-if="comType=='index'&&1==pageIndex" :compontentId="-1" ref="zxIndex"></zx-index>
			<zx-index v-if="comType=='index'&&2==pageIndex" :compontentId="-1" ref="zxIndex"></zx-index>
			<zx-index v-if="comType=='index'&&3==pageIndex" :compontentId="-1" ref="zxIndex"></zx-index>
			<zx-index v-if="comType=='index'&&4==pageIndex" :compontentId="-1" ref="zxIndex"></zx-index>
		</view>
		<view class="cu-bar tabbar">
			<view class="action" v-for="(item,index) in tabbarData" :key="index" @click="NavChange" :data-index="index"
			 :data-cur="item.name" :data-type="item.toUrl.comType">
				<view class='cuIcon-cu-image'>
					<view class="i-tabbar-icon-none" v-if="item.iconIndex==-1"></view>
					<view class="i-tabbar-icon" v-else :style="'background-position:'+ [pageCur==item.name?item.iconUnSelect:item.iconSelect]"></view>
					<view v-if="item.iconIndex==0" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe6bb;':'&#xe6b8;'}}</text>
					</view>
					<view v-if="item.iconIndex==1" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe6b9;':'&#xe6af;'}}</text>
					</view>
					<view v-if="item.iconIndex==2" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe78c;':'&#xe78b;'}}</text>
					</view>
					<view v-if="item.iconIndex==3" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe7c4;':'&#xe7c5;'}}</text>
					</view>
					<view v-if="item.iconIndex==4" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe7b4;':'&#xe7b5;'}}</text>
					</view>
					<view v-if="item.iconIndex==5" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe751;':'&#xe752;'}}</text>
					</view>
					<view v-if="item.iconIndex==6" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe7bf;':'&#xe7c0;'}}</text>
					</view>
					<view v-if="item.iconIndex==7" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe707;':'&#xe708;'}}</text>
					</view>
					<view v-if="item.iconIndex==8" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe668;':'&#xe669;'}}</text>
					</view>
					<view v-if="item.iconIndex==9" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe757;':'&#xe758;'}}</text>
					</view>
					<view v-if="item.iconIndex==10" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe7c3;':'&#xe7c6;'}}</text>
					</view>
					<view v-if="item.iconIndex==11" class="icon-block">
						<text class="i-tabbar-icons icon" :style="'color:'+(pageCur==item.name?selectedColor:unSelectedColor)+''">{{pageCur==item.name?'&#xe718;':'&#xe719;'}}</text>
					</view>
				</view>
				<view :class="(pageCur==item.name)?'text-red':'text-gray'" style="font-size: 24rpx;">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script> 
	import zxIndex from '@/components/zx-diy/zx-index/zx-index.vue'
	import zxCart from '@/components/zx-ui/zx-cart/zx-cart.vue'
	import zxUser from '@/components/zx-ui/zx-user/zx-user.vue'
	import zxGoodsAll from '@/components/zx-ui/zx-goods-all/zx-goods-all.vue'
	import myCloud from '@/common/js/cloud.js'
	import myConst from '@/common/js/const.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			zxIndex,
			zxCart,
			zxUser,
			zxGoodsAll
		},
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				pageCur: '首页',
				comType: 'index',
				tabbarData: [],
				pageIndex: 0,
				selectedColor: '#FF6146',
				unSelectedColor: '#191919',
				showPage: ''
			}
		},
		onLoad(options) {
			if (options.showPage != undefined) {
				this.showPage = options.showPage
			}
		},
		onShow() {
		
		},
		onReady() {
			this.getData(0, 0);
			
		},
		methods: {
			...mapMutations(['login']),
			getData(i, j) {
				if (j == 0 || this.tabbarData[parseInt(i)].toUrl.comType == 'index') {
					const data = {
						action: myConst.ACTION.QUERY,
						params: {}
					}
					myCloud.callFunction(myConst.FUNC_NAME.B_TABBAR, data, (res, e) => {
						
						if (res.length >= 1) {
							this.tabbarData = res[0].data;
							if (this.showPage == 'gwc') {
								for (var j = 0; j < this.tabbarData.length; j++) {
									if (this.tabbarData[j].name == '购物车') {
										this.pageIndex = j
										this.pageCur = '购物车'
										this.comType = 'gwc'
										this.showPage = ''
										break;
									}
								}
							} else if (this.showPage == 'wd') {
								for (var j = 0; j < this.tabbarData.length; j++) {
									if (this.tabbarData[j].name == '我的') {
										this.pageIndex = j
										this.pageCur = '我的'
										this.comType = 'wd'
										this.showPage = ''
										break;
									}
								}
							} else {
								this.$refs.zxIndex.showData(this.tabbarData[parseInt(i)].toUrl.id)
							}
						}
					},true,false)
				}
			},
			NavChange: function(e) {
				this.pageIndex = parseInt(e.currentTarget.dataset.index)
				this.pageCur = e.currentTarget.dataset.cur
				this.comType = e.currentTarget.dataset.type
				if (this.comType == "index") {
					this.getData(e.currentTarget.dataset.index, 1)
				}
				let tmpTitle = ''
				if (this.pageCur == '我的') {
					tmpTitle = '我的'
				} else {
					tmpTitle = this.pageCur
				}
				uni.setNavigationBarTitle({
					title: tmpTitle
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.container {
			margin-bottom: 140rpx;
		}

		.cu-bar {
			padding: 0;
			height: calc(100rpx + env(safe-area-inset-bottom) / 2);
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);
			display: flex;
			position: relative;
			align-items: center;
			height: 100rpx;
			justify-content: space-between;
			line-height: 1;
		}

		.tabbar {
			position: fixed;
			width: 100%;
			bottom: 0;
			z-index: 1024;
			// box-shadow: 0 -1rpx 0rpx rgba(0, 0, 0, 0.1);
			background-color: #ffffff;
			color: #666666;

			.icon {
				font-size: 45rpx;
				font-family: iconfont;
				color: #666666;
			}

			.action {
				display: flex;
				align-items: center;
				height: 100%;
				justify-content: center;
				max-width: 100%;

				.text-red {
					color: $zx-color-primary;
					line-height: 1;
				}

				.text-gray {
					line-height: 1;
				}

				.cuIcon-cu-image {
					margin: 0 auto;
					line-height: 1;
					margin-top: -20rpx;

					.i-tabbar-icons {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						background-size: 480rpx 420rpx;
						background-repeat: no-repeat;
						display: inline-block;
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}

		.tabbar .action {
			font-size: 22rpx;
			position: relative;
			flex: 1;
			text-align: center;
			padding: 0;
			display: block;
			height: auto;
			line-height: 1;
			margin: 0;
			background-color: inherit;
			overflow: initial;
		}
	}
</style>
